<template>
	<view>
		<navBar title="订单列表" />
		<u-tabs name="name" :list="list" :is-scroll="false" :current="current" active-color="#FF9832"
			@change="tabsChange">
		</u-tabs>

		<u-card padding="26" :title="'下单时间：'+item.createDate" :sub-title="ORDERSTATUS[item.orderStatus]" title-size="26"
			sub-title-color="#FF9832" :border="false" box-shadow="0px 0px 24px 0px rgba(150, 150, 150, 0.17)"
			v-for="(item,index) in orderList" :key="index">
			<view slot="body">
				<view class="u-flex">
					<image src="@/static/moive/m-icon.png" mode="aspectFill" style="width: 30rpx;height: 30rpx;">
					</image>
					<view class="u-m-l-10 u-font-lg u-f-w">{{item.cinemaName}}</view>
				</view>
				<view class="u-flex u-m-t-20">
					<view class="u-m-r-20">
						<image :src="item.poster" mode="aspectFill"
							style="width: 130rpx;height: 130rpx;border-radius: 8rpx;"></image>
					</view>
					<view class="u-flex-1">
						<view class="u-p-b-10 u-font-30">{{item.movieName}}</view>
						<view class="u-p-b-10 u-font-26 u-type-info">座位：{{item.seatName}}</view>
						<view class="u-flex u-row-between">
							<view class="u-type-warning u-font-32 u-f-w">¥{{item.discountPrice}}</view>
							<view class="u-font-26">×{{item.ticketNum}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="u-flex u-row-between" slot="foot">
				<view class="u-font-28">糖果抵扣<text>￥{{item.sweetDeductPrice}}</text></view>
				<view>
					<text>合计：</text>
					<text class="u-type-warning u-f-w">￥{{item.actualPayAmount}}</text>
				</view>
			</view>
		</u-card>
		<view style="margin-top: 30rpx;">
			<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navbar/index'
	export default {
		data() {
			return {
				current: 0,
				orderParams: {
					page: 1,
					size: 10,
					orderStatus: '' // 0出票中,1出票成功,4未付款 5 已退款
				},
				list: [{
					name: '全部',
					value: ''
				}, {
					name: '待出票',
					value: 0
				}, {
					name: '已出票',
					value: 1
				}, {
					name: '已退款',
					value: 5
				}],
				ORDERSTATUS: {
					0: '待出票',
					1: '已出票',
					2: '出票失败',
					3: '订单关闭',
					4: '待付款',
					5: '已退款'
				},
				orderList: [],
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				total: 0
			}
		},
		components: {
			navBar
		},
		onPullDownRefresh() {
			this.orderParams.page = 1;
			this.orderList = [];
			this.total = 0;
			this.getData();
			uni.stopPullDownRefresh();
		},
		mounted() {
			this.getData();
		},
		onReachBottom() {
			this.status = 'loading';
			this.orderParams.page = ++this.orderParams.page;
			this.getData()
		},
		methods: {
			tabsChange(val) {
				this.current = val;
				this.orderParams.page = 1;
				this.orderList = [];
				this.total = 0;
				if (val == 0) {
					this.orderParams.orderStatus = '';
				} else if (val == 1) {
					this.orderParams.orderStatus = 0;
				} else if (val == 2) {
					this.orderParams.orderStatus = 1;
				} else if (val == 3) {
					this.orderParams.orderStatus = 5;
				}
				this.getData();
			},
			getData() {
				this.$u.api.filmOrder(this.orderParams).then(res => {
					if (res.code == 0) {
						this.orderList = [...this.orderList, ...res.data];
						this.total += res.data.length;
						if (this.total >= res.extraInfo) {
							this.status = 'nomore';
						}
					}

				})
			}
		}
	}
</script>

<style scoped lang="scss">

</style>
